<template>
  <el-dialog :title="title" top="100px" width="800px" append-to-body :visible.sync="dialogedit" @open="openDialog"
    :before-close="closeDialog" :close-on-click-modal="false">
    <div class="form-box">
      <el-form ref="formdata" :model="ruleform" :rules="rules" label-suffix="：" :validate-on-rule-change="false"
        :show-message="false" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parent_id">
              <treeselect v-model="ruleform.parent_id" :options="deptOptions" :normalizer="normalizer"
                placeholder="选择上级菜单" />
            </el-form-item>
          </el-col>


          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menu_type">
              <el-radio-group v-model="ruleform.menu_type">
                <el-radio v-for="dict in dict.type.sys_menu_type" :key="dict.value"
                  :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="ruleform.menu_type != 'F'">
            <el-form-item label="菜单图标" prop="icon">
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="ruleform.icon" placeholder="点击选择图标" clearable >
                  <svg-icon v-if="ruleform.icon" slot="prefix" :icon-class="ruleform.icon" class="el-input__icon"
                    style="height: 32px;width: 16px;"  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="菜单名称" prop="menu_name">
              <el-input v-model="ruleform.menu_name" placeholder="请输入菜单名称" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="ruleform.menu_type != 'F'">
            <el-form-item prop="is_frame">
              <span slot="label">
                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否外链
              </span>
              <el-radio-group v-model="ruleform.is_frame">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="ruleform.menu_type != 'F'">
            <el-form-item prop="path">
              <span slot="label">
                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                路由地址
              </span>
              <el-input v-model="ruleform.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleform.menu_type == 'C'">
            <el-form-item prop="component">
              <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                组件路径
              </span>
              <el-input v-model="ruleform.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleform.menu_type != 'M'">
            <el-form-item prop="perms">
              <el-input v-model="ruleform.perms" placeholder="请输入权限标识" maxlength="100" />
              <span slot="label">
                <el-tooltip content="控制器中定义的权限字符" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="ruleform.menu_type == 'C'">
            <el-form-item prop="query">
              <el-input v-model="ruleform.query" placeholder="请输入路由参数" maxlength="255" />
              <span slot="label">
                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                路由参数
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleform.menu_type== 'C'">
            <el-form-item prop="isCache">
              <span slot="label">
                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否缓存
              </span>
              <el-radio-group v-model="ruleform.is_cache">
                <el-radio label="0">缓存</el-radio>
                <el-radio label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleform.menu_type != 'F'">
            <el-form-item prop="visible">
              <span slot="label">
                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示状态
              </span>
              <el-radio-group v-model="ruleform.visible">
                <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value"
                  :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <span slot="label">
                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                菜单状态
              </span>
              <el-radio-group v-model="ruleform.status">
                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                  :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save_validate()">保 存</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    listMenu,
    saveMenu
  } from '@/api/system/menu';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import IconSelect from "@/components/IconSelect";
  export default {
    name: 'dept_edit',
    dicts: ['sys_normal_disable', 'sys_menu_type', 'sys_show_hide'],
    components: {
      Treeselect,
      IconSelect
    },
    props: {
      dialogedit: {
        type: Boolean,
        default: false
      },
      ruleform: {
        type: Object,
        default: () => {
          return {
            menu_id: 0,
            menu_name: '',
            parent_id: null,
            path: '',
            component: '',
            query: '',
            is_frame: '',
            is_cache: '',
            menu_type: '',
            visible: '0',
            status: '',
            perms: '',
            icon: ''
          };
        }
      }
    },
    data() {
      return {
        title: '新增菜单',
        deptOptions: [],
        rules: {
          menu_type: [{
            required: true,
            message: '菜单类型不能为空'
          }],
          menu_name: [{
            required: true,
            message: '菜单名称不能为空'
          }],
          status: [{
            required: true,
            message: '状态不能为空'
          }]
        },

      };
    },
    created() {},
    methods: {
      // 选择图标
      selected(name) {
        this.ruleform.icon = name;
      },
      get_tree() {
        let params = {
          showlist: 1
        }
        listMenu(params).then(response => {
          this.deptOptions = this.handleTree(response.rows, "menu_id", "parent_id");
        });
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.menu_id,
          label: node.menu_name,
          children: node.children
        };
      },
      closeDialog() {
        this.$nextTick(() => {
          this.$refs.formdata.resetFields();
          this.$emit('update:dialogedit', !this.dialogedit);
        });
      },
      save_validate() {
        this.$refs.formdata.validate((valid, valids) => {
          if (valid) {
            this.saveData();
          } else {
            var msg = '';
            for (var key in valids) {
              var item = valids[key];
              msg = item[0].message;
              break;
            }
            if (msg) this.$message.error(msg);

            return false;
          }
        });
      },

      async saveData() {

        const loading = this.loading('保存中...');
        saveMenu(this.ruleform).then(response => {
          this.$modal.msgSuccess("保存成功");
          loading.close();
          this.closeDialog();
          this.$emit('reload');
        }).catch(err => {
          loading.close();
        });
      },
      async openDialog() {
        this.get_tree();
        if (this.ruleform.menu_code == 0) {
          this.title = "修改菜单";
        } else {
          this.title = "新增菜单";
        }
      }
    }
  };
</script>

<style scoped>
  .form-box {
    min-height: 400px;
    padding-right: 10px;
    overflow: auto;
  }
</style>
